<template>
  <div>
    <div class="shopcarcontainer">
      <div class="goods-list" v-for="(item, index) in shop" :key="index">
        <div class="mui-card ">
          <div class="mui-card-content">
            <div class="mui-card-content-inner goods-item">
              <mt-switch></mt-switch>
              <img :src="item.thumb_path" />
              <!-- 信息 -->
              <div class="info">
                <h1>{{ item.title }}</h1>

                <div class="goodsinfo">
                  <span class="price">{{ item.sell_price }} </span>

                  <!-- 多少件button -->
                  <nobox :initcount="countObj[item.id]" :id="item.id"></nobox>

                  <a href="#" @click="del(item.id)">删除</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底下的结算区域 -->
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner jiesuan">
            <div class="left">
              <p>总计(不含运费)</p>
              <p>
                已勾选 <span class="danger">{{selectcount}}</span> 件,总价:
                <span class="danger">{{amount}}</span>$
              </p>
            </div>
            <mt-button type="danger" size="small">去结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mui from "../../../lib/mui/js/mui.js";
import { mapGetters,mapMutations } from "vuex";
import nobox from "../sub-components/shopcar_nobox.vue";

export default {
  data() {
    return {
      number: 0,
      shop: [],
    };
  },
  methods: {
    ...mapMutations(['delfromcart']),
    changetext() {
      // this.number =  document.getElementById('test').value
      console.log(document.getElementById("test").value);

      this.number = parseInt(document.getElementById("test").value);
    },
    del(id){
      this.shop.some((item,i)=>{
        if(item.id==id){
          this.shop.splice(i,1)
          return  true
        }
      }),
      this.delfromcart(id)
    },

    async getshop() {
      
      const { data } = await this.$http.get(
        "/api/goods/getshopcarlist/" + this.idStr
      );
      console.log(data);
      this.shop = data.message;
    },
  },
  created() {
    this.getshop();
  },
  mounted() {
    mui(".mui-numbox").numbox();
  },
  computed: {
    ...mapGetters(["idStr", "countObj","selectcount","amount"]),
    
  },
  components: {
    nobox,
  },
};
</script>

<style lang="scss" scoped>
.shopcarcontainer {
  background-color: #eee;
  overflow: hidden;
  .goods-item {
    display: flex;
    img {
      height: 60px;
      width: 60px;
      background-color: red;
    }
    h1 {
      font-size: 14px;
    }
    .info {
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goodsinfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price {
          font-size: 16px;
          color: red;
          font-weight: bold;
        }
      }
    }
  }
}

.danger {
  color: red;
  font-weight: bold;
}

.jiesuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
